<template>
	<!-- 个人中心个人信息组件 -->
	<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
		<view class="u-m-r-10">
			<u-upload 
			:action="action" 
			auto-upload=true
			max-count="1" 
			:upload-text="uploadText"
			:before-upload="beforeUpload"
			>
			</u-upload>
		</view>
		<view class="u-flex-1">
			<view class="u-font-18 u-p-b-20">{{vuex_user.name}}</view>
			<view class="u-font-14 u-tips-color">{{vuex_user.email}}</view>
		</view>
		<!-- <view class="u-m-l-10 u-p-10">
			<u-icon name="scan" color="#969799" size="28"></u-icon>
		</view> -->
		<view class="u-m-l-10 u-p-10">
			<u-icon name="arrow-right" color="#969799" size="28" @click="changeRoute()"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['userInfo'],
		data() {
			return {
				uploadText: '上传头像',
				// 上传地址
				action: '',
			}
		},
		onLoad() {
			// 获取更新后的用户信息
			uni.$on('userInfoName', res => {
					console.log(res)
				}),
				uni.$emit('send')

		},
		// 解除触发事件
		// onUnload() {
		// 	uni.$off('userInfoName');
		// 	uni.$off('send')
		// },
		methods: {
			// 跳转到修改个人信息界面
			changeRoute() {
				// console.log(11)
				uni.navigateTo({
					url: '/pages/userInfoDetail/userInfoDetail'
				});
				uni.$on('send', res => {
					uni.$emit('userInfo', this.userInfo)
				})
			},
			// 上传前获取阿里云OSS Token，用于前端直传文件使用
		    async beforeUpload(){
				await this.$u.get('/api/auth/oss/token').then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {}

	.u-p-l-30 {
		padding-top: 30px;
	}

	.u-flex-1 {
		padding-left: 30px;
	}

	.section_1 {
		padding: 32rpx 40rpx;
		color: rgb(0, 0, 0);
		font-size: 36rpx;
		font-weight: 600;
		line-height: 50rpx;
		white-space: nowrap;
		background-color: rgb(255, 255, 255);
		display: flex;
	}

	.image_4 {
		border-radius: 50%;
		width: 128rpx;
		height: 128rpx;
		vertical-align: center;
	}

	.text_2 {
		margin-left: 32rpx;
		line-height: 66px;
	}
</style>
